<!-- 页面详情 -->
<template>
  <div>
    <detail-banner :sightName='sightName' :bannerImg='bannerImg' :gallaryImgs='gallaryImgs'></detail-banner>
    <detail-header></detail-header>
    <detail-list :list="categoryList"></detail-list>
    <div class="content"></div>
  </div>
</template>

<script>
import DetailBanner from './components/banner'
import DetailHeader from './components/detailHeader'
import DetailList from './components/list'
import axios from 'axios'
export default {
  name: 'Detail',
  data () {
    return {
      sightName: '',
      bannerImg: '',
      gallaryImgs: [],
      categoryList: []
    }
  },

  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },

  computed: {},

  mounted () {
    this.getDetailInfo()
  },

  methods: {
    getDetailInfo () {
      // axios.get('./api/detail.json?id=' + this.$route.params.id).then(result => {    //等同于下面的方法
      axios.get('/api/detail.json', {params: {id: this.$route.params.id}}).then(result => {
        result = result.data
        if (result.ret && result.data) {
          var data = result.data
          this.sightName = data.sightName
          this.bannerImg = data.bannerImg
          this.gallaryImgs = data.gallaryImgs
          this.categoryList = data.categoryList
          console.log(data)
        }
      }, err => {
        console.log(err.message)
      })
    }
  }
}

</script>
<style lang='stylus' scoped>
.content
  height 50rem
</style>
